<template>
  <div class="app-container">
    <!-- <el-row> -->
    <el-card>
      <el-col :span="16" class="card-box">
        <el-cascader
          class="region"
          v-model="value"
          placeholder="选择店铺分组"
          :options="cascadeList"
          :props="{ checkStrictly: true }"
          @change="handleChange"
          style="width: 300px"
        >
        </el-cascader>
      </el-col>
      <timeSearch
        @getDateArr="getDateArr"
        @changDay="changDay"
        :timeArr="timeArr"
        :dayActive="2"
        :dayLimit="1095"
      />
    </el-card>
    <!-- </el-row> -->
    <el-card>
      <h4 style="font-weight: 500; color: #666">核心指标</h4>
      <div class="data-dictionary dis">
        <!-- 左侧菜单标题-->
        <el-scrollbar style="height: 500px; width: 550px">
          <div class="data-dictionary-menu">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="销售总览" name="1">
                <!-- <div class="b2bsH" v-for="(item, index) in list" :key="index" @click="addclass">
                                    
                                    <div :class="item.active ? 'bottom-tabs-active' : ''" style="line-height:66px;">
                                        {{
                                            item.name }}
                                    </div>
                                </div> -->
                <div
                  style="
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                  "
                >
                  <div class="item" style="background-color: lightblue">
                    <div class="item_title">
                      <span>销售总额</span>
                      <el-checkbox
                        style="width: 20px; height: 20px"
                      ></el-checkbox>
                    </div>
                    <div class="item_num" style="color: RoyalBlue">
                      {{ total.input ? total.input : "未更新" }}
                    </div>
                    <div class="item_num item_num_plus">
                      环比
                      <el-button
                        style="color: RoyalBlue"
                        icon="el-icon-download"
                        size="mini"
                        >{{ 78.9 }}%</el-button
                      >
                    </div>
                  </div>
                  <div class="item" style="background-color: aliceblue">
                    <div class="item_title">净销售额</div>
                    <div class="item_num" style="color: LightCoral">
                      {{ extData.noSymptom ? extData.noSymptom : "未更新" }}
                    </div>
                    <div class="item_num item_num_plus">
                      较昨日
                      <el-button
                        style="color: LightCoral"
                        icon="el-icon-download"
                        size="mini"
                        >{{ 12.9 }}%</el-button
                      >
                    </div>
                  </div>
                  <div
                    class="item"
                    style="background-color: lightgoldenrodyellow"
                  >
                    <div class="item_title">客件数</div>
                    <div class="item_num" style="color: OrangeRed">
                      {{
                        total.confirm - total.dead - total.heal
                          ? total.confirm - total.dead - total.heal
                          : "未更新"
                      }}
                    </div>
                    <div class="item_num item_num_plus">
                      较昨日
                      <span style="color: OrangeRed"
                        >+{{
                          today.confirm - today.dead - today.heal
                            ? today.confirm - today.dead - today.heal
                            : ""
                        }}</span
                      >
                    </div>
                  </div>
                  <div class="item" style="background-color: lightgray">
                    <div class="item_title">整体退货率</div>
                    <div class="item_num" style="color: Brown">
                      {{ total.confirm ? total.confirm : "未更新" }}
                    </div>
                    <div class="item_num item_num_plus">
                      较昨日
                      <span style="color: Brown">+{{ today.confirm }}</span>
                    </div>
                  </div>
                  <div class="item" style="background-color: lightpink">
                    <div class="item_title">销售毛利额</div>
                    <div class="item_num" style="color: #333">
                      {{ total.dead ? total.dead : "未更新" }}
                    </div>
                    <div class="item_num item_num_plus">
                      较昨日 <span style="color: #333">+{{ today.dead }}</span>
                    </div>
                  </div>
                  <div class="item" style="background-color: lightgreen">
                    <div class="item_title">销售毛利额</div>
                    <div class="item_num" style="color: green">
                      {{ total.heal ? total.heal : "未更新" }}
                    </div>
                    <div class="item_num item_num_plus">
                      较昨日 <span style="color: green">+{{ today.heal }}</span>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item title="反馈 Feedback" name="2">
                <div>
                  控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
                </div>
                <div>
                  页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
                </div>
              </el-collapse-item>
              <el-collapse-item title="效率 Efficiency" name="3">
                <div>简化流程：设计简洁直观的操作流程；</div>
                <div>
                  清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
                </div>
                <div>
                  帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
                </div>
              </el-collapse-item>
              <el-collapse-item title="可控 Controllability" name="4">
                <div>
                  用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
                </div>
                <div>
                  结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-scrollbar>
        <!-- 右侧内容区域---el-table表格 -->
        <div class="data-dictionary-table">
          <div v-for="(item, index) in activeList" :key="index">
            <div>{{ item }}</div>
          </div>

          <!-- <div v-if="activeIndex == 1">1</div>
                    <div v-if="activeIndex == 2">2</div>
                    <div v-if="activeIndex == 3">3</div>
                    <div v-if="activeIndex == 4">4</div>
                    <div v-if="activeIndex == 5">5</div> -->
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  listAll,
  getBrandChannelShop,
  delBrandChannelShop,
  addBrandChannelShop,
  updateBrandChannelShop,
} from "@/api/chart/brandChannelShop";
// import Sidebar from "@/layout/components/Sidebar/indexcopy.vue";

import timeSearch from "./day.vue";
import TotalSales from "@/views/example/help/TotalSales.vue";
export default {
  components: {
    timeSearch,
    TotalSales,
    // Sidebar,
  },
  //   name: "Secondry",
  // dicts: ['sys_product_qudao', 'sys_product_size', 'sys_product_coder', 'sys_sample_sf', 'sys_one_zero', 'sys_sample_status', 'sys_sample_name', 'sys_sample_cj'],
  data() {
    return {
      value: ["VFU", "天猫", "vfu运动旗舰店"],
      total: {},
      today: {},
      extData: {},
      activeList: ["销售总额(含退款)", "退款金额"],

      activeIndex: 1, // 数据名称
      activeName: "",
      dataTree: [1, 2, 3, 4, 5],
      //el-collapse
      activeNames: ["1", "2"],
      // activeList: ["百度", "Bing"],
      list: [
        { name: "销售总额(含退款)", active: true },
        { name: "退款金额", active: true },
        { name: "净销售额(不含退款)", active: false },
        { name: "搜狗", active: false },
        { name: "微博", active: false },
      ],
      //时间
      dayActive: 2,
      timeArr: [
        { value: "2", label: "昨天" },
        { value: "7", label: "最近7天" },
        { value: "30", label: "最近30天" },
      ],
      timeGap: { startTime: "", endTime: "" },
      cascadeList: [],
    };
  },
  created() {
    /** 查询品牌渠道店铺关系列表 */
    this.getList();
  },
  methods: {
    treeList(data) {},
    /** 查询品牌渠道店铺关系列表 */
    getList() {
      listAll().then((response) => {
        // response.rows = [
        //     { channel: '抖音', shopName: 'VFU抖一抖店-抖音', brand: 'VFU' },
        //     { channel: '抖音', shopName: 'VFU-抖音小店', brand: 'VFU' },
        //     { channel: '头条放心购', shopName: 'VFU-头条放心购', brand: 'VFU' },
        //     { channel: '拼多多', shopName: 'VFU-拼多多', brand: 'VFU' },
        //     { channel: '微信', shopName: 'VFU-微店', brand: 'VFU' },
        //     { channel: '微信', shopName: 'VFU-微信商城', brand: 'VFU' },
        //     { channel: '小红书', shopName: 'VFU-小红书', brand: 'VFU' },
        //     { channel: '严选', shopName: 'VFU-严寻合作', brand: 'VFU' },
        //     { channel: '天猫', shopName: 'VFU运动旗舰店', brand: 'VFU' },
        //     { channel: '京东', shopName: 'VFU运动旗舰店-京东', brand: 'VFU' }
        // ];
        // const result = [];

        let result = this.transformData(response);
        this.cascadeList = result;

        // console.log(JSON.stringify(result, null, 2));
      });

      // const data
    },
    transformData(data) {
      let result = [];

      data.forEach((item) => {
        let brand = item.brand;
        let channel = item.channel;
        let shopName = item.shopName;

        // 如果brand在结果数组中不存在，则创建一个新的数组
        let brandIndex = result.findIndex(
          (brandObj) => brandObj.label === brand
        );
        if (brandIndex === -1) {
          result.push({
            label: brand,
            value: brand,
            children: [],
          });
          brandIndex = result.length - 1;
        }

        // 如果channel在当前brand的children数组中不存在，则创建一个新的数组
        let channelIndex = result[brandIndex].children.findIndex(
          (channelObj) => channelObj.label === channel
        );
        if (channelIndex === -1) {
          result[brandIndex].children.push({
            label: channel,
            value: channel,
            children: [],
          });
          channelIndex = result[brandIndex].children.length - 1;
        }

        // 如果shopName在当前channel的children数组中不存在，则创建一个新的数组
        let shopIndex = result[brandIndex].children[
          channelIndex
        ].children.findIndex((shopObj) => shopObj.label === shopName);
        if (shopIndex === -1) {
          result[brandIndex].children[channelIndex].children.push({
            label: shopName,
            value: shopName,
            // children: []
          });
        }
      });

      return result;
    },

    addclass: function (e) {
      console.log(JSON.stringify(this.activeList[0]));
      let spl = this.activeList[0];
      // console.log(e.target);
      let name = e.target.innerText;
      this.list.forEach((item) => {
        if (item.name == name) {
          item.active = true;
        }
        if (item.name == spl && this.activeList.indexOf(name) < 0) {
          item.active = false;
          this.activeList.push(name); //像数组末尾添加元素
          this.activeList.shift(); //移除数组中的第一个元素
        }
      });
      console.log(JSON.stringify(this.activeList));
    },
    // 点击获取分页
    menuClick(id) {
      // console.log(id, typeof id)
      this.activeIndex = id; // 改变样式
      console.log(this.activeIndex, this.activeName);
    },

    handleChange(val) {
      console.log(JSON.stringify(val));
    },
    changDay(val) {
      this.dayActive = val;
      this.timeGap.startTime = val[0];
      this.timeGap.endTime = val[1];
    },
    getDateArr(value) {
      this.timeGap.startTime = value[0];
      this.timeGap.endTime = value[1];
      console.log(JSON.stringify(this.timeGap));
    },
  },
};
</script>


<style lang="scss" scoped>
::v-deep .el-cascader__dropdown .el-scrollbar__bar .is-horizontal {
  display: none;
}

::v-deep .el-collapse,
.el-collapse-item__wrap {
  border: none;
  bottom: -1px;
}

::v-deep .el-collapse-item__header {
  padding: 20px;
  border: none;
  // position: absolute;
  padding-bottom: -40px;
  // width: 100%;
  // background: red;
  font-size: 14px;
  font-weight: bold;
}

::v-deep .el-collapse-item__content {
  border: none;
  padding-bottom: 0px;
  // border-bottom: 0.1px dashed rgb(222, 220, 220);
}

::v-deep .el-collapse__content {
  border: none;
}

.dis {
  display: flex;
}

.data-dictionary {
  .data-dictionary-menu {
    width: 100%;
    height: 100vh;
    // margin-right: 20px;
    // border: 1px solid rgb(222, 220, 220);
    // border-radius: 4px;
    text-align: center;

    .b2bsH {
      float: left;
      margin: 5px 5px;
      border: 1px solid #edeef0;
      border-radius: 4px;
      cursor: pointer;
      height: 66px;
      // padding: 2px 4px;
      width: 200px;

      &.active {
        background-color: #007ad8;
        //   background: url("./img/xuanzhong.png") no-repeat right bottom;
      }
    }

    .b2bsH :hover {
      background: #f7f8fc;
      border-color: #f7f8fc;
    }

    // .bottom-tabs-active {
    //     // line-height: 40px;
    //     background-color: rgb(222, 220, 220);

    // }

    // .tree-top {
    //     color: #ffffff;
    //     padding: 20px 0px;
    //     border-radius: 4px 4px 0 0;
    //     background-color: rgb(34, 124, 229);
    //     // border-bottom: 1px solid rgb(222, 220, 220);
    // }

    // .tree-content {
    //     padding: 0px 10px;
  }

  .bottom-tabs-active {
    // line-height: 40px;
    background-color: rgb(222, 220, 220);
  }

  .data-dictionary-table {
    width: 80%;
  }
}
</style>
<style>
.el-scrollbar__wrap {
  overflow-x: hidden;
}

.item {
  text-align: center;
  width: 150px;
  height: 140px;
  margin-right: 5px;
  margin-bottom: 5px;
  /* width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-between; */
}

.item:nth-child(3n) {
  margin-right: 0;
}

.item_title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 0px;
  display: flex;
  justify-content: space-between;
}

.item_num {
  margin-top: 10px;
  font-size: 30px;
  font-weight: bold;
}

.item_num_plus {
  font-size: 16px;
  color: #666;
  /* background-color: white */
}
</style>